<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>笔记列表</title>
    <script src="../../js/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="../../css/note-list.css">
    <link rel="stylesheet" href="../../css/iconfont.css">
    <script src="../../layui/layui.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .layui-layer-content iframe {
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 30px;
        }

        .layui-layer {
            border-radius: 30px;
        }
    </style>
</head>
<body>
<div id="content">
    <div id="header">
        <div class="search-form">
            <input class="search-input" id="search-input" type="text" name="query" placeholder="搜索...">
            <button class="search-button iconfont" id="search-btn" type="button">&#xe752;</button>
            <ul id="keyword"></ul>
        </div>
        <div class="add-form">
            <button class="iconfont" id="addbtn">&#xe739;&nbsp&nbsp发布笔记</button>
        </div>
    </div>
    <div id="bodydiv">
    </div>
</div>
</body>
<script>
    layui.use(['layer'], function () {

        const bodydiv = document.getElementById("bodydiv")
        const inputChange1 = document.getElementById("search-input")//获取inputDom
        const keywordul = document.getElementById("keyword")
        const timer = null;
        const searchbtn = document.getElementById("search-btn")
        const addbtn = document.getElementById("addbtn")

        //搜索按钮点击事件
        searchbtn.addEventListener("click", function (e) {
            let value = inputChange1.value//获取值的方式一
            console.log(value)//输出
            loadnote(value);
        })
        addbtn.addEventListener("click", function (e) {
            const token = sessionStorage.getItem("Authorization");
            console.log(token)
            if (token == null || token == "") {
                layer.msg("请先登录")
                window.location.href = "../login/toLogin.html";
            }else{
                window.location.href = "add.html";
            }
        })
        //监听输入框输入事件
        inputChange1.oninput = debounce(function () {//监听输入事件
            let value = inputChange1.value//获取值的方式二
            clearTimeout(timer); // 清除上一次延时任务
            getkeywordlist(value);
        }, 500)

        // 防抖函数
        function debounce(func, wait) {
            let timeout;
            return function (...args) {
                if (timeout) clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(this, args), wait);
            };
        }

        inputChange1.addEventListener('blur', function (obj) {
            console.log("输入框失去焦点")
            setTimeout(function () {
                keywordul.innerHTML = ""
            }, 500)

        });

        //获取关键字列表
        function getkeywordlist(keyword) {
            let data = {"keyword": keyword, "pageNo": 0, "pageSize": 10}
            $.ajax({
                url: "http://39.98.107.120/noteWord/queryNoteWord",
                type: "post",
                data: JSON.stringify(data),
                contentType: "application/json",
                dataType: "json",
                success: function (data) {
                    if (data.code == "200") {
                        keywordul.innerHTML = ""
                        for (let i = 0; i < data.data.length; i++) {
                            let li = document.createElement("li")
                            li.innerHTML = data.data[i]
                            li.className = "keywordli"
                            keywordul.appendChild(li)
                            addclick()
                        }
                    } else {
                        console.log(data.message)
                    }
                }
            })
        }

        //给li标签添加点击事件
        function addclick() {
            const lis = document.getElementsByClassName("keywordli");
            for (let i = 0; i < lis.length; i++) {
                lis[i].onclick = function () {
                    console.log(this.innerText)
                    inputChange1.value = this.innerText
                    loadnote(this.innerText)
                }
            }
        }

        loadnote();

        function loadnote(keyword) {
            let data = {keyword: keyword}
            $.ajax({
                url: "http://39.98.107.120/note/queryNotes",
                type: "post",
                data: JSON.stringify(data),
                contentType: "application/json",
                dataType: "json",
                success: function (data) {
                    if (data.code == "200") {
                        bodydiv.innerHTML = ""
                        for (let i = 0; i < data.data.records.length; i++) {
                            let divs = document.createElement("div")
                            let coverdiv = document.createElement("div")
                            let userdiv = document.createElement("div")
                            let touxiang = document.createElement("img")
                            let userName = document.createElement("span");
                            let dateText = document.createElement("span");
                            let label = document.createElement("label");
                            let title = document.createElement("div")
                            divs.className = "notelist"
                            divs.title = data.data.records[i].title
                            coverdiv.className = "coverdiv"
                            coverdiv.setAttribute("index", data.data.records[i].id)
                            coverdiv.style.backgroundImage = "url(" + data.data.records[i].coverUrl + ")";
                            userdiv.className = "userdiv"
                            title.className = "title"
                            label.innerHTML = data.data.records[i].title
                            label.className = "titlelabel"
                            touxiang.className = "coverimg"
                            touxiang.src = data.data.records[i].avatarUrl
                            userName.textContent = data.data.records[i].nickName;
                            dateText.textContent = data.data.records[i].createTime;
                            userName.className = "nickName";
                            dateText.className = "dateText"
                            title.appendChild(label);
                            userdiv.appendChild(touxiang)
                            userdiv.appendChild(userName);
                            userdiv.appendChild(dateText);
                            divs.appendChild(coverdiv)
                            divs.appendChild(title)
                            divs.appendChild(userdiv)
                            bodydiv.appendChild(divs)
                        }
                        addnoteclick()
                    } else {
                        console.log(data.message)
                    }
                }
            })

            function addnoteclick() {
                let coverdiv = document.getElementsByClassName("coverdiv")
                for (let i = 0; i < coverdiv.length; i++) {
                    coverdiv[i].onclick = function () {
                        let noteid = encodeURI(this.getAttribute("index"))
                        // window.location.href="/page/html/note/detail.html?noteId="+noteid
                        layer.open({
                            type: 2,
                            area: ['60%', '75%'], //宽高
                            title: '笔记详情',
                            content: ['detail.html?noteId=' + noteid, 'no']
                        });

                    }
                }
            }
        }

    })
</script>
</html>